<template>
	<Layout :class="'bg-white p-2'">
		<Row class="m-1">
			<Button class="float-left m-1" type="error" @click="newProduct">新增</Button>
			<Col class="p-1" span="4">
				<Input clearable v-model="searchObject.name" placeholder="产品名称"  />
			</Col>
			<Col class="p-1" span="4">
				<Input clearable v-model="searchObject.price" @on-keyup="price(searchObject.price)" placeholder="请输入起始价格"  />
			</Col>
			<Col class="p-1" span="4">
				<Input clearable v-model="searchObject.endPrice" @on-keyup="endprice(searchObject.endPrice)" placeholder="请输入截止价格"  />
			</Col>
			<Col class="p-1" span="4">
				<Input clearable v-model="searchObject.categorys" placeholder="请输入分类名称"  />
			</Col>
			<Col class="p-1" span="4" placeholder="请选择状态">
				<Select v-model="searchObject.statu" clearable >
					<Option value="1">激活</Option>
					<Option value="0">禁用</Option>
				</Select>
			</Col>
			<Button class="m-1 float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="url">
					<img v-if="row.url" style="width: 50px; height: 50px; border-radius: 25px;" :src="'https://'+row.url" />
					<span v-else>无</span>
				</template>
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu">激活</span>
					<span v-else>禁用</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.productId)">编辑</Button>
					<Button type="error" size="small" @click="remove(row.productId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
					searchObject: {
						productId: "",
						url:"",
						name: "",
						price: "",
						endPrice:"",
						categorys:"",
						statu: "",
					},
					tableInfo: {
						currentPage: 1,
						total: 0,
						pageSize: 10,
						columnInfo: [
							{
								title: "编号",
								key: "productId",
								width: "70px",
							},
							{
								title: "封面图",
								slot: "url",
								width: "86px",
							},
							{
								title: "产品名称",
								key: "name",
								width: "136px",
							},
							{
								title: "产品价格",
								key: "price",
								width: "130px",
							},
							{
								title: "分类列表",
								key: "categorys",
								
							},
							{
								title: "状态",
								slot: "statu",
								width: "70px",
							},
							{
								title: "操作",
								slot: 'action',
								width: 150
							}
						],
						data: []
					}
				
			};
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newProduct: function() {
				this.$router.push({
					name: "product_new"
				});
			},
			show: function(productId) {
				this.$router.push({
					path: "/product/detail?productId="+productId,
				});
			},
			 price(){
			          if(this.searchObject.price == 0){
			            this.searchObject.price=""
			          }else{
			            this.searchObject.price=this.searchObject.price.replace(/\D/g,'')
			          }
			      
			        },
			endprice(){
					 if(this.searchObject.endPrice == 0){
					   this.searchObject.endPrice=""
					 }else{
					   this.searchObject.endPrice=this.searchObject.endPrice.replace(/\D/g,'')
					 }
				 
				   },
		
			search: function() {
				
				
				this.http.get({
					url: "/product/product/page",
					param: {
						current: this.tableInfo.currentPage,
						name: this.searchObject.name,
						price: this.searchObject.price,
						endPrice: this.searchObject.endPrice,
						categorys:this.searchObject.categorys,
						statu: this.searchObject.statu,
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
				console.log(this.tableInfo)
				
				
			},
			
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			},
			remove: function(productId) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除本产品，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/product/info",
							param: {
								productId
							}
						}).then(data => {
							this.message.info('删除成功');
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		},
		created: function() {
			this.init();
		},
	}
</script>

<style>
</style>
